<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单管理</title>

    <link href="/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="/css/personal.css" rel="stylesheet" type="text/css">
    <link href="/css/orstyle.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="/css/hmstyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="/AmazeUI-2.4.2/assets/js/amazeui.js"></script>

    <script src="/layui/layui.js"></script>
    <script src="/js/common.js" type="text/javascript"></script>

</head>

<body>
<!--头 -->
<th:block th:include="header"/>


<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-order">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> /
                        <small>Order</small></div>
                </div>
                <hr/>

                <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>
                    <input type="button" value="搜索" id="searchBtn">
                    <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
                        <li id="" class="am-active"><a  href="#tab1" >所有订单</a></li>
                        <li id="0"><a href="#tab2" >待付款</a></li>
                        <li id="1"><a href="#tab3" >待发货</a></li>
                        <li id="2"><a href="#tab4">待收货</a></li>
                        <li id="3"><a href="#tab5" >已完成</a></li>
                    </ul>

                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">


                        </div>
                        <div class="am-tab-panel am-fade" id="tab2">


                        </div>
                        <div class="am-tab-panel am-fade" id="tab3">

                        </div>
                        <div class="am-tab-panel am-fade" id="tab4">

                        </div>

                        <div class="am-tab-panel am-fade" id="tab5">


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--底部-->
        <th:block th:include="footer"/>

    </div>
    <aside class="menu">
        <ul>
            <li class="person">
                <a href="/information">个人中心</a>
            </li>
            <li class="person">
                <ul>
                    <li><a href="/information">个人信息</a></li>
                    <li> <a href="/password">安全设置</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li class="active"><a href="/order">订单管理</a></li>
                </ul>
            </li>

            <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li><a href="collection.html">收藏</a></li>
                    <li><a href="foot.html">足迹</a></li>
                    <li><a href="comment.html">评价</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>

<script id="orderTemplate" type="text/html">

    <div class="order-top">
        <div class="th th-item">
            <td class="td-inner">商品</td>
        </div>
        <div class="th th-price">
            <td class="td-inner">单价</td>
        </div>
        <div class="th th-number">
            <td class="td-inner">数量</td>
        </div>
        <div class="th th-operation">
            <td class="td-inner">商品操作</td>
        </div>
        <div class="th th-amount">
            <td class="td-inner">合计</td>
        </div>

        <div class="th th-change">
            <td class="td-inner">交易操作</td>
        </div>
    </div>
    {{# layui.each(d,function(index,item){ }}
    <div class="order-main">
        <div class="order-list">

            <!--交易成功-->
            <div class="order-status5">
                <div class="order-title">
                    <div class="dd-num">订单编号：<a href="javascript:;">{{=item.code}}</a></div>
                    <span>成交时间：{{=item.createTime}}</span>
                    <!--    <em>店铺：小桔灯</em>-->
                </div>
                <div class="order-content">
                    {{# layui.each(item.details,function(index2,item2){ }}
                    <div class="order-left">
                        <ul class="item-list">
                            <li class="td td-item">
                                <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                        <img src="{{=item2.imgPath}}" class="itempic J_ItemImg">
                                    </a>
                                </div>
                                <div class="item-info">
                                    <div class="item-basic-info">
                                        <a href="#">
                                            <p>{{=item.title}}</p>
                                            <input type="hidden" name="id" id="id" value="{{=item.id}}"/>
                                            <p class="info-little">口味：{{=item2.taste}}
                                                <br/>包装：{{=item2.packages}} </p>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-price">
                                <div class="item-price">
                                    {{=item2.oldPrice}}
                                </div>
                            </li>
                            <li class="td td-number">
                                <div class="item-number">
                                    <span>×</span>{{=item2.amount}}
                                </div>
                            </li>
                            <li class="td td-operation">
                                <div class="item-operation">

                                </div>
                            </li>
                        </ul>
                    </div>
                    {{# }) }}
                    <div class="order-right">
                        <li class="td td-amount">
                            <div class="item-amount">
                                合计：{{=item.price}}
                                <p>含运费：<span>包邮</span></p>
                            </div>
                        </li>
                        <div class="move-right">
<!--                            <li class="td td-status">-->
<!--                                <div class="item-status">-->
<!--                                    <p class="Mystatus">{{=item.status}}</p>-->
<!--                                </div>-->
<!--                            </li>-->
                            {{# if(item.status == '1'){ }}
                            <li class="td td-change" id="daifahuo">
                                <div class="am-btn am-btn-danger anniu">
                                    待发货
                                </div>
                            </li>
                            {{#  } }}
                            {{# if(item.status == '0'){ }}
                            <li class="td td-change" id="daifukuan">
                                <div class="am-btn am-btn-danger anniu">
                                    待付款
                                </div>
                            </li>
                            {{#  } }}
                            {{# if(item.status == '2'){ }}
                            <li class="td td-change" id="querenshouhuo">
                                <div class="am-btn am-btn-danger anniu">
                                    <a href="/personal/confirm?id={{=item.id}}">确认收货</a>
                                </div>
                            </li>
                            {{#  } }}
                            {{# if(item.status == '3'){ }}
                            <li class="td td-change" id="delBtn">
                                <div class="am-btn am-btn-danger anniu">
                                    删除订单
                                </div>
                            </li>
                            {{#  } }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{#  }) }}
    <div id="demo-laypage-normal-1"></div>
</script>

<script>
    layui.use(["layer", "laytpl", "laypage"], function () {
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var limit = 5;//默认每页10条
        var page = 1;//默认打开第一页

        // $(".SS").on("click",function (){
        //     $("#search-btn").click();
        // })


        $("#searchBtn").on("click", function () {
            var status = $(".am-active").attr("id");
            console.log(status);
            var keyword = $("#keyword").val();


            //页面加载完成就发请求获取所有的分类数据
            $.get("/personal/orderList?status=" +status +"&limit=" + limit + "&page=" + page, function (orders) {


                //personal数据转化成html,再插入到UL1中
                laytpl($("#orderTemplate").html()).render(orders.data, function (a) {
                    $(".am-in").html(a);
                });
                    laypage.render({
                        elem: 'demo-laypage-normal-1',
                        count: orders.count, // 数据总数
                        curr: page,
                        limit: limit,
                        jump: function (obj, first) {
                            if (!first) {
                                page = obj.curr;
                                $("#searchBtn").click();
                            }
                        }
                    });


                //给删除订单绑定事件
                $("#delBtn").on("click", function () {
                    var oid = $("#id").val()
                    console.log(oid)
                    $.get("/personal/deleteOrder/" + oid, function () {
                        layer.msg("删除成功")
                        $("#searchBtn").click();
                    })

                })

            });


        });
        $("#searchBtn").click();
    });


</script>
</body>

</html>